<template>
	<view>
		<view class="container u-skeleton">
			<view class="userinfo">
				<block>
					<!--u-skeleton-circle 绘制圆形-->
					<image class="userinfo-avatar u-skeleton-circle" :src="shop.cover"></image>
					<!--u-skeleton-fillet 绘制圆角矩形-->
					<text class="u-skeleton-fillet">{{shop.name}}</text>
				</block>
			</view>
			<view>
				<view class="lists">
					<!--u-skeleton-rect 绘制矩形-->
					<text class="u-skeleton-rect">{{shop.store_introduction}}</text>
				</view>
				<u-line></u-line>
				<view class="store-info">
					<!-- <view class="calculation-data">
						<view class="data-title u-skeleton-rect">营业时间</view>
						<view class="data-text u-skeleton-rect">{{shop.time1}} - {{shop.time2}}</view>
					</view> -->
					<view class="calculation-data">
						<view class="data-title u-skeleton-rect">门店地址</view>
						<view class="data-text u-skeleton-rect">
							<text>{{shop.address}}</text> <u-button v-if="shop.lat && shop.lng" size='mini' shape="circle" style="margin-left:.5em"
								@click="openMap">查看位置</u-button>
						</view>
					</view>
					<view class="calculation-data" v-if="shop.store_call1">
						<view class="data-title u-skeleton-rect">商家电话</view>
						<view class="data-text u-skeleton-rect"><text v-if="shop.store_call1"
								@click="makeCall(shop.store_call1)">{{shop.store_call1}} </text>
							<u-button size='mini' shape="circle" style="margin-left:.5em"
								@click="makeCall(shop.store_call1)">拨打电话</u-button>
						</view>
					</view>
					<view class="calculation-data" v-if="shop.store_call2">
						<view class="data-title"></view>
						<view class="data-text u-skeleton-rect"><text v-if="shop.store_call2"
								@click="makeCall(shop.store_call2)">{{shop.store_call2}} </text>
							<u-button size='mini' shape="circle" style="margin-left:.5em"
								@click="makeCall(shop.store_call2)">拨打电话</u-button>
						</view>
					</view>
					<!-- <view class="calculation-data">
						<view class="data-title u-skeleton-rect">配送服务</view>
						<view class="data-text u-skeleton-rect"><text>{{shop.delivery_introduction}}</text></view>
					</view> -->


				</view>
			</view>
			<u-line></u-line>
			<view>
				<view class="lists" v-if="shop.wx_qrcode">
					<view class="u-padding-50 u-flex" style="justify-content: center;">
						<u-image :src="shop.wx_qrcode" width="320" class="u-skeleton-rect" mode="widthFix"></u-image>
					</view>

					<!-- <u-alert-tips type="success" class="u-skeleton-rect" title="长按识别二维码, 关注中勘石油微商城"
						description=""></u-alert-tips> -->
				</view>
				<!-- <view class="u-skeleton-rect">
					<map style="width: 100%; height: 300px;" title="中勘石油微商城" :enable-traffic="true" :latitude="latitude" :longitude="longitude"
						:markers="covers">
					</map>
				</view> -->
			</view>
		</view>
		<view class="u-demo-area btn-line" style="text-align: center;">
			<u-button type="primary" size="medium" plain shape="circle" @click="openCS">在线客服</u-button>
		</view>
		<!--引用组件-->
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
		<wx-share :title='shop.name' :desc="shop.store_introduction" :imgUrl="shop.cover" link="/" ref="wxs"></wx-share>
	</view>
</template>

<script>
	var jweixin = require('jweixin-module')
	
	export default {
		data() {
			return {
				shop: {},
				loading: true, // 是否显示骨架屏组件
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 29.449983,
				longitude: 104.403782,
				covers: [{
					latitude: 29.449913,
					longitude: 104.403975,
					iconPath: '../../static/location.png',
					width: 24,
					height: 24
				}]
			}
		},
		onLoad() {
			// 通过延时模拟向后端请求数据，调隐藏骨架屏
			this.getShop();
		},
		methods: {
			openCS(){
				location.href='https://work.weixin.qq.com/kfid/kfc6d3aceb85522e2b7'
			},
			getShop() {
				this.loading = true;
				this.$u.post('/shopping/shop-setting', {}).then(res => {
					this.shop = res;
					this.loading = false;
				}).catch(e => {

				})
			},
			openMap() {
				let lat = parseFloat(this.shop.lat);
				let lng = parseFloat(this.shop.lng);
				if(!lat || !lng){
					return;
				}
				jweixin.ready(()=>{
					jweixin.openLocation({
						// 调起地图应用进行导航
						  latitude: lat, // 纬度，浮点数，范围为90 ~ -90
						  longitude: lng, // 经度，浮点数，范围为180 ~ -180。
						  name: this.shop.name, // 位置名
						  address: this.shop.address, // 地址详情说明
						  scale: 14, // 地图缩放级别,整型值,范围从1~28。默认为最大
						  infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
					})
				})
			},
			openLocation() {
				if (!this.shop.lat || !this.shop.lng) {
					console.log('open location false;')
					return false;
				}
				let that = this;
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: function(res) {
						console.log(res)
						const latitude = parseFloat(that.shop.lat);
						const longitude = parseFloat(that.shop.lng);
						uni.openLocation({
							latitude: latitude,
							longitude: longitude,
							name: that.shop.name,
							address: that.shop.address,
							success: function() {
								console.log('success');
							}
						});
					}
				});
			},
			makeCall(phoneNumber) {
				uni.makePhoneCall({
					phoneNumber: phoneNumber //仅为示例
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx 60rpx;
	}

	.userinfo {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.userinfo-avatar {
		width: 128rpx;
		height: 128rpx;
		margin: 20rpx;
		border-radius: 50%;
	}

	.lists {
		margin: 10px 0;
	}

	.store-info {
		background-color: transparent;
		// padding: 0 30rpx 30rpx 30rpx;
		border-radius: 10rpx;
		box-sizing: border-box;
		margin-bottom: 30rpx;

		.bold {
			font-weight: bold;
			border-bottom: 1rpx solid #c9c8d2;
		}

		.calculation-data {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding-top: 30rpx;
			// margin-bottom: 10rpx;

			.data-title {
				width: 6em;
				font-weight: bold;
			}

			.data-text {
				flex: 1;
				display: flex;
				uni-text{
					flex:1
				}
			}
		}

	}
</style>
